<!--
  @Description:我的团队 修改/创建
  @author Wangshu
  @date 2019/8/21
-->

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="__PUBLIC__/css/common/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/header.css">
    <link rel="stylesheet" href="__PUBLIC__/css/changeData.css">
    <link rel="stylesheet" href="__PUBLIC__/css/menu.css">
    <link rel="stylesheet" href="__PUBLIC__/css/common/common.css">
    <title>山东科技大学技术转移公共服务平台-我的团队</title>
</head>
<body>
<head>
    <div class="top-title">
        <div>
            <span>欢迎登陆山东科技大学技术转移公共服务平台！</span>
            <if condition="$uid eq null">
                <div class="login">
                    <img src="__PUBLIC__/asset/icon/people.png" alt="">
                    <a href="{:url('login/index')}">登录</a>
                    <span class="spece">|</span>
                    <a href="{:url('login/signup')}">注册</a>
                </div>
                <else/>
                <div class="login">
                    <img src="__PUBLIC__/asset/icon/people.png" alt="">
                    <a href="{:url('me/me')}">欢迎你！</a>
                    <a href="{:url('me/me')}">{$user.real_name}</a>
                </div>
            </if>
        </div>
    </div>
    <div class="logo-box">
        <div class="logo-wrap">
            <div>
                <img src="__PUBLIC__/asset/fodder/logo.png" alt="">
            </div>
            <div>
                <div class="search">
                    <div class="dropdown">
                        <div class="btn select-default dropdown-toggle" type="button" id="dropdownMenu1"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            请选择学院
                            <span><img style="width: 20px;" src="__PUBLIC__/asset/icon/dropdown.png" alt=""></span>
                        </div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <foreach name="allColleges" item="vo">
                                <li><a onclick="shows1($(this).text(),{$vo.id})">{$vo.college_name}</a></li>
                            </foreach>
                        </ul>
                    </div>
                    <div class="search-block">
                        <input type="text" name="keyword" id="keyword">
                    </div>
                    <div class="submit" id="submit">
                        <img src="__PUBLIC__/asset/icon/search.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav-box">
        <div class="nav-list">
            <ul>
                <li><a href="{:url('/index/index')}">首页</a></li>
                <li><a href="{:url('news/index')}">新闻</a></li>
                <li><a href="{:url('people/index')}">人才库</a></li>
                <li><a href="{:url('fruit/index')}">成果库</a></li>
                <li><a href="{:url('requirement/index')}">需求库</a></li>
                <li class="active"><a href="{:url('me/callme')}">联系我们</a></li>
            </ul>
        </div>
    </div>
</head>
<main>
    <div class="content-wrap">
        <div class="menu-left">
            <div class="title">个人中心</div>
            <ul>
                <li>
                    <a href="./me.html">个人资料</a>
                    <img src="__PUBLIC__/asset/icon/right_arrow.png" alt="">
                </li>
                <if condition="$user_type eq 0">
                <li><a href="./fruit.html">我发布的成果</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                </if>
                <li><a href="./requirement.html">我发布的需求</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <if condition="$user_type eq 0">

                <li class="active">
                    <a href="./team.html">我的团队</a>
                    <img class="active-arrow" src="__PUBLIC__/asset/icon/right_arrow.png" alt="">
                </li>
                </if>
                <li><a href="./collection.html">我的收藏</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./FAQ.html">常见问题</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./callMe.html">联系客服</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./other.html">其他设置</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
            </ul>
        </div>
        <div class="menu-right">
            <div class="title">
                <div>个人资料</div>
                <div>当前位置：<span>个人中心/我的团队/团队资料</span></div>
            </div>
            <div class="content">
                <div class="option">
                    <div>团队照片：</div>
                    <input id="teamPicInput" class="imageinput" name="file" style="display: none;" type="file"
                           accept="image/jpeg,image/jpg,image/png"/>
                    <div class="img-box">
                        <if condition="$team.team_pic">
                            <img id="teamPic" src="{$team.team_pic}" alt="" onclick="selectTeamPic()">
                            <else/>
                            <img id="teamPic" src="__PUBLIC__/asset/fodder/header.png" alt="" onclick="selectTeamPic()">
                        </if>
                    </div>
                    <input id="team_file" name="file" style="display: none;" value="{$team.team_pic}" type="text"/>
                </div>
                <div class="option">
                    <div>团队名称：</div>
                    <div class="text-box"><input type="text" id="teamName" placeholder="请输入团队名称"
                                                 value="{$team.team_name}"></div>
                </div>
                <div class="option">
                    <div>关键词：</div>
                    <div class="text-box"><input type="text" id="keywords" placeholder="请输入关键词"
                                                 value="{$team.keywords}"></div>
                </div>


                <div class="option">
                    <div>主要成员：</div>
                    <div class="text-box"><input type="text" id="mainMember" placeholder="请输入主要成员"
                                                 value="{$team.main_member}"></div>
                </div>

                <div class="option intro-wrap">
                    <div>团队简介：</div>
                    <div class="intro-box"><textarea name="" id="content" cols="60" rows="7" placeholder="请输入团队简介">{$team.content}</textarea>
                    </div>
                </div>
                <div class="option intro-wrap">
                    <div>研究方向及主要成果：</div>
                    <div class="intro-box"><textarea name="" cols="60" id="specialty" rows="7"
                                                     placeholder="请输入研究方向及主要成果">{$team.specialty}</textarea>
                    </div>
                </div>
                <div class="addTitle">
                    <div>团队成员</div>
                    <div id="addMember">添加成员</div>
                </div>
                <div class="option">
                    <div>项目负责人姓名：</div>
                    <div class="text-box"><input type="text" id="founderName" placeholder="请输入项目负责人姓名"
                                                 value="{$team.founder_name}"></div>
                </div>
                <div class="option">
                    <div>简介：</div>
                    <div class="text-box"><input type="text" id="founderDesc" placeholder="请输入简介"
                                                 value="{$team.founder_desc}"></div>
                </div>
                <div class="option">
                    <div>照片：</div>
                    <div class="img-box">
                        <if condition="$team.founder_pic neq null">
                            <img id="founderImage" src="{$team.founder_pic}" alt=""
                                 onclick="$('#founderPicInput').click();">
                            <else/>
                            <img id="founderImage" src="__PUBLIC__/asset/fodder/header.png" alt=""
                                 onclick="$('#founderPicInput').click();">
                        </if>
                    </div>
                    <input class="layui-btn" id="founderPicInput" name="file" style="display: none;" type="file"
                           accept="image/jpeg,image/jpg,image/png"/>
                    <input id="founder_file" name="file" style="display: none;" type="text" value="{$team.founder_pic}"/>

                </div>

                <div style="height: 1px; background: #e7e7e7; margin:20px 0;"></div>
                <div id="members">
                    <volist name="team_members" id="vo" key="index">
                        <div class="option">
                            <div>成员姓名：</div>
                            <div class="text-box"><input name="name_{$index-1}" type="text" placeholder="请输入成员姓名" value="{$vo.name}"></div>
                        </div>
                        <div class="option">
                            <div>简介：</div>
                            <div class="text-box"><input  name="content_{$index-1}" type="text" placeholder="请输入简介" value="{$vo.content}"></div>
                        </div>
                        <div class="option">
                            <div>照片：</div>
                            <div class="img-box">

                                <if condition="$team.founder_pic neq null">
                                    <img  id="head_{$index-1}"  src="{$vo.head_img}" alt=""
                                          onclick="selectImage({$index})">
                                    <else/>
                                    <img id="head_{$index-1}" src="__PUBLIC__/asset/fodder/header.png" alt="" onclick="selectImage({$index-1})">

                                </if>

                            </div>
                            <input class="memberImageInput" id="member_image_{$index-1}" name="file" style="display: none;" type="file"
                                   accept="image/jpeg,image/jpg,image/png"/>
                            <input id="image_file_{$index-1}" name="file" style="display: none;" type="text" value="{$vo.head_img}"/>
                        </div>
                        <div style="height: 1px; background: #e7e7e7; margin:20px 0;"></div>
                    </volist>
                </div>
                <div class="save save-team">
                    <div id="save">保存修改</div>
                </div>
            </div>
            <input class="layui-btn memberImageInput" name="file" style="display: none;" type="file"
                   accept="image/jpeg,image/jpg,image/png"/>
        </div>
    </div>
</main>
<footer>
    <div class="foot-line">
        <span>青岛校区地址：山东省青岛市黄岛区前湾港路579号</span>
        <span>邮政编码：266590</span>
        <span>联系电话：0532-80698028\80698027\80678029</span>
        <span>传真：0532-80698029</span>
    </div>
    <div class="foot-line">
        <span>泰安校区地址：山东省泰安市岱宗大街223号</span>
        <span>邮政编码：271019</span>
        <span>联系电话：0538-3076489</span>
        <span>传真：0538-3076489</span>
    </div>
    <div class="last-line">
        Copyright©2019 　山东科技大学 　鲁ICP备09051012号
    </div>
</footer>
<div class="pop-box">
    <div class="pop">
        <img class="close" src="__PUBLIC__/asset/icon/close.png" alt="">
        <div class="logo"><img src="__PUBLIC__/asset/icon/success.png" alt=""></div>
        <p id="popText">您的个人资料保存成功</p>
        <div class="affirm">
            <div id="affirmBtn">确定</div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/js/public/jquery-1.11.3.min.js"></script>
<script src="__PUBLIC__/js/public/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/layer/layer/layer.js"></script>
<script type="text/javascript" src="__STATIC__/layui/layui.all.js"></script>

<script>
    $('#save').on('click', function () {
        // layer.msg('请输入', {
        //     time: 1500,
        // });
        const teamPic = $("#team_file").val();
        const teamName = $("#teamName").val();
        const mainMember = $("#mainMember").val();
        const keywords = $("#keywords").val();
        const content = $("#content").val();
        const specialty = $("#specialty").val();
        const founderName = $("#founderName").val();
        const founderDesc = $("#founderDesc").val();
        const founderImage = $("#founder_file").val();
        let member = [];
        for (let i = 0; i < member_count; i++) {
            const name = $(`input[name="name_${i}"]`).val();
            const content = $(`input[name="content_${i}"]`).val();
            const image = $(`#image_file_${i}`).val();

            const m = {
                name,
                content,
                head_img: image
            }
            member.push(m)
        }

        const data = {
            team_name: teamName,
            team_pic: teamPic,
            main_member: mainMember,
            keywords,
            content,
            specialty,
            founder_name: founderName,
            founder_pic: founderImage,
            founder_desc: founderDesc,
            members: member
        };
        console.log(data)
        $.post("{:url('saveTeam')}", data, function (res) {
            if (res.code == 0) {
                return layer.msg(res.msg);
            } else {
                layer.msg(res.msg, {}, function () {
                    window.location.reload()
                })
            }
        })
    });

    $('#update').on('click', function () {
        $('.pop-box').css('display', 'block')
        $('#popText').text('您在人才库更新成功！')
    })

    $('#affirmBtn').on('click', function () {
        $('.pop-box').css('display', 'none')
    })

    $('.close').click(function () {
        $('.pop-box').css('display', 'none')
    })

    $('.dropdown-toggle').dropdown()

    var selectCollege = null;

    function shows1(a, id) {
        selectCollege = {id, college: a};
        $("#dropdownMenu1").text(a);
    }

    function shows2(a) {
        $("#dropdownMenu2").text(a);
    }

    $(".tag-box ul li").click(function () {
        let status = $(this).hasClass("active")
        if (status === false) {
            $(this).addClass('active')
        } else {
            $(this).removeClass('active')
        }
    });


    $("#submit").on('click', function () {
        var name = $("#keyword").val();
        if (!selectCollege) {
            window.open("{:url('people/index')}?keyword=" + name)
        } else {
            window.open("{:url('people/index')}?college=" + selectCollege.id + "&keyword=" + name)
        }
    })

    function selectTeamPic() {
        $("#teamPicInput").click();
    }

    var upload = layui.upload;

    upload.render({
        elem: '#founderPicInput',
        url: "{:url('api/asset/fileUpload')}",
        exts: 'jpg|png|bmp|jpeg',
        data: {path: 'avatar'},
        before: function (obj) {
            obj.preview(function (index, file, result) {
                $(`#founderImage`).attr('src', result); //图片链接（base64）
            });
        },
        done: function (res) {
            if (res.code == 0) {
                return layer.msg(res.message);
            }
            $(`#founder_file`).val(res.filepath);
        }
    });

    upload.render({
        elem: '#teamPicInput',
        url: "{:url('api/asset/fileUpload')}",
        exts: 'jpg|png|bmp|jpeg',
        data: {path: 'avatar'},
        before: function (obj) {
            obj.preview(function (index, file, result) {
                $('#teamPic').attr('src', result); //图片链接（base64）
            });
        },
        done: function (res) {
            if (res.code == 0) {
                return layer.msg(res.message);
            }
            $('#team_file').val(res.filepath);
        }
    });

    var member_count = `{$member_count}` != '' ?  {$member_count} : 0;

    $("#addMember").click(function () {

        const html = `
                 <div class="option">
                    <div>成员姓名：</div>
                    <div class="text-box"><input name="name_${member_count}" type="text" placeholder="请输入成员姓名"></div>
                </div>
                <div class="option">
                    <div>简介：</div>
                    <div class="text-box"><input  name="content_${member_count}" type="text" placeholder="请输入简介"></div>
                </div>
                <div class="option">
                    <div>照片：</div>
                    <div class="img-box"><img id="head_${member_count}" src="__PUBLIC__/asset/fodder/header.png" alt="" onclick="selectImage(${member_count})"></div>
                     <input class="memberImageInput" id="member_image_${member_count}" name="file" style="display: none;" type="file"
                           accept="image/jpeg,image/jpg,image/png"/>
                    <input id="image_file_${member_count}" name="file" style="display: none;" type="text"/>
                </div>
                <div style="height: 1px; background: #e7e7e7; margin:20px 0;"></div>`

        $("#members").append(html);
        member_count += 1;

        $(".memberImageInput").change(function () {
            console.log(this)
            uploadImage(this)
        })
    });


    var currentId = 0;

    function selectImage(id) {
        currentId = id;
        $(`#member_image_${id}`).click();
    }

    $(".memberImageInput").change(function () {
        console.log(this)
        uploadImage(this)
    })

    function uploadImage(x) {
        var fileInput = x.files[0];
        //判断是否选择了图片
        if (x.files && x.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                //此处得到是图片的base64编码数据
                imagUrl = e.target.result;
                $(`#head_${currentId}`).attr('src', imagUrl); //图片链接（base64）
                //展示哪个样式
            };
            reader.readAsDataURL(x.files[0]);
        }
        let data = new FormData()
        data.append('file', x.files[0]);
        data.append('path', 'avatar');
        // $.post("{:url('api/asset/fileUpload')}",data,function (res) {
        //     if (res.code == 0) {
        //         return layer.msg(res.message);
        //     }
        //     $(`#image_file_${currentId}`).val(res.filepath);
        // })

        $.ajax({
            url: "{:url('api/asset/fileUpload')}",
            data,
            type: 'POST',
            cache: false,
            processData: false,
            contentType: false
        }).done(function (res) {
            if (res.code == 0) {
                return layer.msg(res.message);
            }
            console.log($(`#image_file_${currentId}`))
            $(`#image_file_${currentId}`).val(res.filepath);
        }).fail(function (res) {
            return layer.msg(res.message);
        })
    }


</script>
</body>
</html>

